<!DOCTYPE html>
<html>
<head>
    <title>Launch Aeroviewr Sample Application</title>

    <link href="../../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="../../../styles/kendo.default.min.css" rel="stylesheet">

    <script src="../../../js/jquery.min.js"></script>
    <script src="../../../js/kendo.web.min.js"></script>
    <script src="../../content/shared/js/console.js"></script>
   
    <script src="../../content/spa/aeroviewr/js/500px.js"></script>
    <script src="../../content/spa/aeroviewr/js/aeroviewr.js"></script>
    <link href="../../content/spa/aeroviewr/css/aeroviewr.css" rel="stylesheet">
</head>
<body>
    
    
        <div id="root"></div>

        <script type="text/x-kendo-template" id="main">
            <header>
                <form data-bind="events: { submit: performSearch }">
                    <label>Search: <input type="search" data-bind="value: query" /></label>
                </form>
                <h1 class="aeroLogo"><a href="">aero<span>viewr</span></a></h1>&nbsp;
                <!--button id="slideshow-button" data-bind="text: slideShowButtonText, click: toggleSlideShow"></button-->
            </header>

            <section data-bind="events: { click: toggleFocus }" id="image-container">
                <div id="image-wrap">
                    <div id="image-inner-wrap" data-bind="events: { click: toggleShowDetails }">
                        <section data-bind="attr: { class: detailsClass }" id="details">
                            <div>
                                <h2 data-bind="text: currentPhoto.name, visible: currentPhoto.name"></h2>
                                <p data-bind="html: currentPhoto.description, visible: currentPhoto.description"></p>
                                <ul>
                                    <li data-bind="visible: currentPhoto.camera"><span>Camera</span><div data-bind="text: currentPhoto.camera"></div></li>
                                    <li data-bind="visible: currentPhoto.focal_length"><span>Focal Length</span><div data-bind="text: currentPhoto.focal_length"></div></li>
                                    <li data-bind="visible: currentPhoto.shutter_speed"><span>Shutter Speed</span><div data-bind="text: currentPhoto.shutter_speed"></div></li>
                                    <li data-bind="visible: currentPhoto.aperture"><span>Aperture</span><div data-bind="text: currentPhoto.aperture"></div></li>
                                    <li data-bind="visible: currentPhoto.iso"><span>ISO</span><div data-bind="text: currentPhoto.iso"></div></li>
                                    <li data-bind="visible: currentPhoto.times_viewed"><span>Times Viewed</span><div data-bind="text: currentPhoto.times_viewed"></div></li>
                                    <li data-bind="visible: currentPhoto.rating"><span>Rating</span><div data-bind="text: currentPhoto.rating + '%'"></div></li>
                                    <li data-bind="visible: currentPhoto.categoryName"><span>Category</span><div data-bind="text: currentPhoto.categoryName"></div></li>
                                    <li data-bind="visible: currentPhoto.user.fullname"><span>Copyright</span><div data-bind="text: currentPhoto.user.fullname"></div></li>
                                    <li data-bind="invisible: currentPhoto.noAvatar"><span>Avatar</span><div><img data-bind="attr: { src: currentPhoto.user.userpic_url }"/></div></li>
                                </ul>
                            </div>
                        </section>
                        <div class="loading" data-bind="style: { width: currentPhoto.calculatedWidth }">
                            <div class="image" data-bind="style: { backgroundImage: currentPhoto.backgroundPhoto, width: currentPhoto.calculatedWidth, visibility: currentPhoto.image_url ? 'visible' : 'hidden' } "></div>
                        </div>
                    </div>
                </div>
            </section>

            <footer>
                <a data-bind="click: scrollLeft" id="scroll-left" class="scroll-arrow">&#x2039;</a>
                <div data-role="listview" data-auto-bind="false" data-bind="{ source: photos }" data-template="photo-thumb" id="photo-thumbs"></div>
                <a data-bind="click: scrollRight" id="scroll-right" class="scroll-arrow">&#x203A;</a>
            </footer>
        </script>

        <script type="text/x-kendo-template" id="photo-thumb">
            <a data-bind="attr: { href: thumbHref, class: thumbClass }"><img data-bind="attr: { src: image_url }"></a>
        </script>
    
</body>
</html>
